<template>
<div class="m-seal-box">
    <div class="m-seal-list">
        <div class="m-seal-item"
             v-for="(item,index) of list"
             :style="sizeStyle"
        >
            <my-icon @click="delSeal(index)" v-if="!readOnly" class="group-del" size="1.2rem" type="icon-icon-test26"/>
            <image :src="getImg(item)" alt="" />
        </div>
    </div>
    <div class="m-seal-select" v-if="showButton" @click="selectImg">
        <my-icon style="color: rgba(0, 0, 0, 0.45)" size="1.3rem" type="icon-lineshenpi"></my-icon>
        <span style="">{{getText(metadata.options.comment)}}</span>
    </div>

    <!-- 提示窗示例 -->
    <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog
            :cancelText="i18n('close','关闭')"
            :confirmText="i18n('AGREE','同意')"
            :title="i18n('attention','注意')"
            :content="content"
            @confirm="dialogConfirm"
        />
    </uni-popup>
</div>
    <RxEmpty v-if="readOnly && list.length==0"></RxEmpty>
</template>

<script>
/*
印章控件
 */
import MForm from "../js/MForm";
import FormUtil from "@/js/FormUtil.js"
import dayjs from 'dayjs';
import MSealDialog from "./MsealDialog.vue";
import Util from '@/js/Util.js'
import RxEmpty from "@/components/RxEmpty"
import Dialog from "../../../../js/Dialog";
export default {
    name: "MSeal",
    mixins: [MForm],
    components:{RxEmpty},
    data(){
        return {
            list:[],
            //是否显示覆盖窗口.
            showCover:false,
            //记录该章已经被盖时，新选择的数据；
            curSelectImgData:{},
            //记录该章已经被盖时，已经存在的数据；
            selectImgData:{},
            content:this.i18n('seal','该印章已存在是否替换?')
        }
    },
    computed:{
        /**
         * 是否显示选择按钮.
         * 1.只读不显示。
         * 2.如果时单选则显示。
         * 3.如果本人已选择，则不再显示。
         */
        showButton(){
            if(this.readOnly){
                return false;
            }
            let isSingle=  this.metadata.options.seal=='single';
            //单选
            if(isSingle){
                return this.list.length == 0;
            }
            else{
               return  true
            }
        }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"componentsLang",key);
        },
        delSeal(idx){
            this.list.splice(idx,1)
        },
        sizeStyle(){
            let {width,height} = this.metadata.options ;
            return {width,height}
        },
        getImg(item){
            return FormUtil.getImagePath(this,item.fileId,false);
        },
        dialogConfirm(){
            let curSelectImgData  = {...this.curSelectImgData};
            let idx = this.list.findIndex(item=>item.fileId === curSelectImgData.fileId);
            this.list.splice(idx,1,curSelectImgData);
        },
        /**
         * 选择印章。
         */
        selectImg(){
            let { category } = this.metadata.options;
            let config = {
                curVm:this,
                component:MSealDialog,
                data:{
                    category:category
                }
            }
            let self_=this;
            Dialog.MsealDialog(config,(data=>{
                let obj = Util.deepClone(data);
                //当前时间
                if(!obj){
                    return
                }
                let curTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
                if(self_.contextData){
                    //获取上下文数据，插入盖章人，盖章人id,盖章时间
                    let {curUserId,curUserName} = self_.contextData ;
                    obj['creatorId'] = curUserId
                    obj['creator'] = curUserName
                }
                obj['createTime'] = curTime
                let field = self_.list.find(item=>{return item.fileId === obj.fileId })
                //如果存在
                if(field){
                    //新选数据
                    self_.curSelectImgData = obj ;
                    //已经存在的数据
                    self_.selectImgData = field ;
                    self_.$refs.alertDialog.open()

                }else {
                    self_.list.push(obj);
                    self_.updateValue(JSON.stringify(self_.list));
                }
            }))

        },
        initList(){
            let val=this.value || "[]";
            let fn = new Function('return' + val );
            this.list = fn() || [];
        }
    },
    watch:{
        value:{
            handler:function (val) {
                this.initList();
            },
            deep: true,
            immediate:true
        }
    }
}
</script>

<style scoped>
.group-del{
    position: absolute;
    right: -0.8rem;
    top: -0.8rem;
    color: rgba(255, 81, 81, 1);
}
.m-seal-list{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: .2rem;
}
.m-seal-select{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:4rem;
    height:4rem;
    opacity: 1;
    border-radius: 0.5rem;
    border: 0.03rem solid rgba(232, 232, 232, 1);
}
.m-seal-item{
    position: relative;
    width:5rem;
    height:5rem;
    opacity: 1;
    border-radius: 0.5rem;
    border: 0.03rem solid rgba(232, 232, 232, 1);
    display: inline-flex;
}
.m-seal-item:not(:first-child){
    margin-left: .5rem;
}
.m-seal-item image{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
</style>
